<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <SubBread />
      <!-- 刷选 -->
      <SubFilter />
      <div class="goods-list">
        <SubSort />
        <SubList />
      </div>
    </div>
  </div>
</template>

<script>
import SubSort from './components/sub-sort.vue'
import SubFilter from './components/sub-filter.vue'
import SubBread from './components/sub-bread.vue'
import SubList from './components/sub-list'
import { findSubCategoryFilter } from '@/api/category.js'
import { ref, onMounted, provide } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubFilter,
    SubSort,
    SubList
  },
  setup () {
    const subCates = ref({})
    const route = useRoute()
    // 获取过滤条件数据
    // const filterParams = inject('filterParams')
    async function getSubCates () {
      const res = await findSubCategoryFilter(route.params.id)
      console.log(112, res)
      // subCates.value = res.result.saleProperties.name
      // 需求 品牌和规格数据添加全部选项和为每个选项添加选中状态数据
      // 1 给品牌和规格添加全部选项
      // 选中状态
      res.result.brands.forEach(brand => {
        brand.selected = false
      })
      // 给品牌添加全部选项
      res.result.brands.unshift({
        id: null,
        name: '全部',
        selected: true
      })
      // 选中状态
      res.result.saleProperties.forEach(item => {
        item.properties.forEach(proper => {
          proper.selected = false
        })
        //  给规格 添加全部选项
        item.properties.unshift({
          id: null,
          name: '全部',
          selected: true
        })
      })
      subCates.value = res.result
    }
    // 筛选条件数据
    const filterParams = ref({
      attrs: [], // 一般商品属性 => {groupName: "规格", propertyName: "CPE加厚手套-100只/盒"}
      sortField: null, // 排序 => // publishTime(最新), orderNum(人气), price(价格), evaluateNum(评论)
      brandId: null // 品牌ID => '1'
    })
    // 提供过滤条件数据
    provide('filterParams', filterParams)
    // 提供二级分类数据给子组件
    provide('subCates', subCates)
    console.log('subCates', subCates)
    onMounted(() => {
      getSubCates()
    })
    return { subCates }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
